<script setup>
import { ref } from "vue"
import { onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';


const router = useRouter();
// defineProps({
//     movie_list_data:Object
// })

const loading = ref(false);
const finished = ref(false);
const props = defineProps(['movie_list_data'])

// let msg = $props


let gotodtail = (filmId) => {

    router.push({
        path:'/moviedtail',
        query:{
            filmId:filmId
        }
        
    });

}


onMounted(() => {
    console.log('组件挂载了');


});

</script>

<template>
    <div >
        <ul>
            <div v-for="(item,index) in movie_list_data " :key="index" :class="index===0?'movie_card_start':'movie_card'" @click="gotodtail(item.filmId)">

              <div class="img_box">
                <img :src="item.poster">
              </div>
              <div class="movie_info_box">
                <div class="movie_info">
                  <div class="movie_title_box">
                    <span class="movie_title">{{ item.name }}</span>
                    <span class="movie_fileType"> {{ item.filmType.name }}</span>
                  </div>
                  <div class="movie_info_box2">
                    <div class="movie_grade">
                            <span class="grade_text_a">
                                {{ item.grade ? '观众评分' : '暂无评分' }}
                            </span>
                      <span class="grade_text_b">
                                &nbsp;{{ item.grade ? item.grade : '' }}
                            </span>
                    </div>
                    <div class="actord-info-col">
                            <span class="actord-info-col-label">
                                主演：{{ item.actors }}
                            </span>
                    </div>
                    <div class="other_info_box">
                            <span class="other_info">
                            {{ item.nation }} | {{ item.runtime }}分钟
                        </span>
                    </div>
                  </div>
                </div>
                <div class="btn_box">
                  <button class="buy_btn">
                    购票
                  </button>

                </div>
              </div>
            </div>
        </ul>



    </div>
</template>

<style scoped src="../css/moviecardstyle.css"></style>